<!-- 字典数据 -->
<script setup lang="ts">
import {
    getDictPage,
    getDictFormData,
    addDict,
    updateDict,
    deleteDict,
} from "@/api/dict";
import { DictPageVO, DictForm, DictQuery } from "@/api/dict/types";
import type { TabsPaneContext } from 'element-plus'
import { Search, DocumentCopy, Check, Plus } from '@element-plus/icons-vue'
defineOptions({
    name: "DictData",
    inheritAttrs: false,
});
const input = ref('')
const input4 = ref('')
const input5 = ref('')

const value1 = ref(true)
const value2 = ref(true)
const value4 = ref(true)
const value5 = ref(true)
const copy = ref('56');
const copy2 = ref('kys-6UMzIihJ1U-CW4yMTBMEU');
const showCheckIcon = ref(false);
const showCheckIcon2 = ref(false);
const centerDialogVisible = ref(false)
const centerDialogVisible2 = ref(false)
const centerdialog=ref(false)
const inputIp = ref('');

const tags = ref([
])
/* 复制函数 */
const onCopyClick = () => {
    navigator.clipboard.writeText(copy.value)
        .then(() => {
            ElMessage({
                message: '复制成功',
                type: 'success',
            });
            console.log('复制成功');
            showCheckIcon.value = true;
        })
        .catch((err) => {
            ElMessage.error('复制失败');
            console.error('复制失败', err);
        });
};
const onCopyClick2 = () => {
    navigator.clipboard.writeText(copy2.value)
        .then(() => {
            ElMessage({
                message: '复制成功',
                type: 'success',
            })
            console.log('复制成功');
            showCheckIcon2.value = true;
        })
        .catch((err) => {
            ElMessage.error('复制失败')
            console.error('复制失败', err);
        });
};

/* 复制的图标切换 */

const toggleIcon = () => {
    showCheckIcon.value = !showCheckIcon.value;
};
const toggleIcon2 = () => {
    showCheckIcon2.value = !showCheckIcon2.value;
};

/* 添加调用IP */
const handleAddIp = () => {
    if (inputIp.value.trim() !== '') {
        tags.value.push({ name: inputIp.value, type: '' });
        inputIp.value = ''; // 清空输入框
        
    }
    centerdialog.value = false; // 关闭弹窗
};
const removeTag = (index) => {
    tags.value.splice(index, 1);
};



const props = defineProps({
    typeCode: {
        type: String,
        default: () => {
            return "";
        },
    },
    typeName: {
        type: String,
        default: () => {
            return "";
        },
    },
});

watch(
    () => props.typeCode,
    (newVal: string) => {
        queryParams.typeCode = newVal;
        formData.typeCode = newVal;
        resetQuery();
    }
);


/* 编辑-常规 */
const value3 = ref()
const options3 = [
    {
        value: 'Option1',
        label: 'Option1',
    },
    {
        value: 'Option2',
        label: 'Option2',
    },
    {
        value: 'Option3',
        label: 'Option3',
    },
]
const queryFormRef = ref(ElForm);
const dataFormRef = ref(ElForm);

const loading = ref(false);
const ids = ref<number[]>([]);
const total = ref(0);

const queryParams = reactive<DictQuery>({
    pageNum: 1,
    pageSize: 10,
    typeCode: props.typeCode,
});

//const dictList = ref<DictPageVO[]>();

/* tab页 */
const activeName = ref('first')
const handleClick = (tab: TabsPaneContext, event: Event) => {
    console.log(tab, event)
}

const dialog = reactive({
    title: "",
    visible: false,
});

const formData = reactive<DictForm>({
    status: 1,
    typeCode: props.typeCode,
    sort: 1,
});

const rules = reactive({
    name: [{ required: true, message: "请输入", trigger: "blur" }],
    value: [{ required: true, message: "请输入", trigger: "blur" }],
});

/**
 * 查询
 */
function handleQuery() {
    if (queryParams.typeCode) {
        loading.value = true;
        getDictPage(queryParams)
            .then(({ data }) => {
                dictList.value = data.list;
                total.value = data.total;
            })
            .finally(() => (loading.value = false));
    }
}

/**
 * 重置查询
 */
function resetQuery() {
    queryFormRef.value.resetFields();
    queryParams.pageNum = 1;
    handleQuery();
}

/**
 * 行checkbox change事件
 *
 * @param selection
 */
function handleSelectionChange(selection: any) {
    ids.value = selection.map((item: any) => item.id);
}

/**
 * 打开字典表单弹窗
 *
 * @param dictId 字典ID
 */
function openDialog(dictId?: number) {
    dialog.visible = true;
    if (dictId) {
        dialog.title = "修改字典";
        getDictFormData(dictId).then(({ data }) => {
            Object.assign(formData, data);
        });
    } else {
        dialog.title = "新增字典";
    }
}

/**
 * 字典表单提交
 */
function handleSubmit() {
    dataFormRef.value.validate((isValid: boolean) => {
        if (isValid) {
            loading.value = false;
            const dictId = formData.id;
            if (dictId) {
                updateDict(dictId, formData)
                    .then(() => {
                        ElMessage.success("修改成功");
                        closeDialog();
                        resetQuery();
                    })
                    .finally(() => (loading.value = false));
            } else {
                addDict(formData)
                    .then(() => {
                        ElMessage.success("新增成功");
                        closeDialog();
                        resetQuery();
                    })
                    .finally(() => (loading.value = false));
            }
        }
    });
}

/**
 * 关闭弹窗
 */
function closeDialog() {
    dialog.visible = false;
    resetForm();
}

/**
 * 重置表单
 */
function resetForm() {
    dataFormRef.value.resetFields();
    dataFormRef.value.clearValidate();

    formData.id = undefined;
    formData.status = 1;
    formData.sort = 1;
    formData.typeCode = props.typeCode;
}

/**
 * 删除字典
 */
function handleDelete(dictId?: number) {
    const dictIds = [dictId || ids.value].join(",");
    if (!dictIds) {
        ElMessage.warning("请勾选删除项");
        return;
    }

    ElMessageBox.confirm("确认删除已选中的数据项?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
    }).then(() => {
        deleteDict(dictIds).then(() => {
            ElMessage.success("删除成功");
            resetQuery();
        });
    });
}

onMounted(() => {
    handleQuery();
});


/* 静态表格字段 */
const dictList = ref([
    /*  {
         name: '商户1',
         value: 'M100001',
     },
     {
         name: '商户2',
         value: 'M100002',
     },
     {
         name: '商户3',
         value: 'M100003',
     }, */


]);
</script>

<template>
    <div class="app-container">
        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick" style="margin-top: -30px;">
            <div class="main" style="width: 100%;display: flex;">
                <div class="left">
                    <el-form ref="" :model="formData" :rules="rules" label-width="100px">
                        <el-form-item label="所属产品" prop="name" style="display: flex;align-items: center;">
                            <el-select v-model="value3" class="m-2" placeholder="请选择所属产品" size="default"
                                style="width: 400px;margin-left: -0px;">
                                <el-option v-for="item in options3" :key="item.value" :label="item.label"
                                    :value="item.value" />
                            </el-select>
                        </el-form-item>
                        
                        <el-form-item label="通道名称" prop="name" style="display: flex;align-items: center;">
                            <el-input v-model="formData.code" style="width: 400px;" placeholder="请输入通道名称" />
                        </el-form-item>
                        <el-form-item label="上游编码" prop="" style="display: flex;align-items: center;">
                            <el-input v-model="formData.code" style="width: 400px;" placeholder="请输入上游编码" />
                        </el-form-item>
                    </el-form>
                </div>
            </div>
        </el-tabs>

    </div>
</template>


<style lang="scss" scoped>
.input-with-select .el-input-group__prepend {
    background-color: var(--el-fill-color-blank);
}

.demo-tabs>.el-tabs__content {
    padding: 32px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
}
</style>
